<template>
  <div class="w-full h-full ">
    <div id="main" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts';
const props = defineProps({
  datas: {
    type: Array,
    default: () => []
  }
})
onMounted(
    () => {
      init()
    }
)
const init = () => {

  var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    const data = genData(props.datas.length);
    option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: -50,
        top: 20,
        bottom: 20,
        textStyle: {
          color: '#ffffff'
        },
        pageTextStyle: {
          color: '#ffffff'
        },
        data: data.legendData
      },
      label: {
        color: '#ffffff'
      },
      series: [
        {
          name: '名称',
          type: 'pie',
          radius: '55%',
          center: ['40%', '50%'],
          data: data.seriesData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
     function genData(count) {
        // prettier-ignore
       // 获取props.datas所有的Name
        const nameList = props.datas.map(item => item.name);
        const val = props.datas.map(item => item.value);
        const legendData = [];
        const seriesData = [];
        for (var i = 0; i < count; i++) {
          var name = nameList[i];
          seriesData.push({
            name: name,
            value: val[i]
          });
        }
        return {
          legendData: nameList,
          seriesData: seriesData
        };
    /*     function makeWord(max, min) {
          const nameLen = Math.ceil(Math.random() * max + min);
          const name = [];
          for (var i = 0; i < nameLen; i++) {
            name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
          }
          return name.join('');
        } */
      }

    option && myChart.setOption(option);
}
</script>

<style scoped lang="scss">

</style>
